<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="left">
        <v-ons-back-button>返回</v-ons-back-button>
      </div>
      <div class="center">保证金</div>
    </v-ons-toolbar>
    <div class="container">

      <div class="row">
        <div class="title" v-if="!authenticate">
          <h3>我的保证金：<span>0.00元</span></h3>
        </div>
      </div>

      <div class="row" v-if="authenticate">
        <div class="bail-group">
          <button class="bail-item" :class="currentSelectBail == 1 ? 'active':''" @click="selectBail({item:1})">300元</button>
          <button class="bail-item" :class="currentSelectBail == 2 ? 'active':''" @click="selectBail({item:2})">400元</button>
          <button class="bail-item" :class="currentSelectBail == 3 ? 'active':''" @click="selectBail({item:3})">500元</button>
          <button class="bail-item" :class="currentSelectBail == 4 ? 'active':''" @click="selectBail({item:4})">600元</button>
        </div>
      </div>

      <div class="row">
        <div class="bail-detail">
          <h3>保证金说明</h3>
          <p>1.在缴纳保金后，方可正常的进行跑单任务；</p>
          <p>2.根据缴纳的保证金金额不同，相应的派单任务也会有所不同。</p>
          <p>3.保证金可申请退还，申请后7个工作日内退还。</p>
        </div>
      </div>

      <div class="row">
        <div class="btn-group">
          <button class="btn-item info"  v-if="authenticate">立即缴纳</button>
          <button class="btn-item default"  v-if="!authenticate">申请退款</button>
        </div>
      </div>

    </div>

  </v-ons-page>
</template>

<script>
  export default {
    data() {
      return {
        authenticate: true,
        currentSelectBail: 1
      }
    },
    methods: {
      enterPage({path:path,actionSheet:actionSheet}){
        if(actionSheet){
          this.actionSheetVisible = false
        }
        this.$router.push({
          path:path
        });
      },
      selectBail({item: item}) {
        this.currentSelectBail = item;
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/service/bail.less";
</style>
